<template>
  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
           :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" ok-text="确定发货"
           :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">


    <!--表单开始-->
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-form-item label="快递公司" field="expressName">
        <a-select v-model="formState.expressName" :options="dataList" allow-clear placeholder="请输入快递公司 " />


      </a-form-item>

      <a-form-item label="快递单号" field="expressCode">
        <a-input v-model="formState.expressCode"  allow-clear placeholder="请输入快递单号"/>
      </a-form-item>

      <a-form-item label="快递费用" field="expressFee">
        <a-input-number v-model="formState.expressFee" >
          <template #append> <span style="width: 40px;">元</span> </template>
        </a-input-number>
      </a-form-item>


    </a-form>
    <!--表单结束-->
  </a-modal>
</template>

<script lang="ts" setup>

import {EditModal} from '@/libs/core'
import {EGG_SEND} from "../resource/form";
import {UnionEggHttp} from '../resource/http'


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = EGG_SEND

const {replenishExpress} = UnionEggHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: undefined, emit}

const dataList= ['顺丰快递','京东快递','极兔快递','圆通快递','中通快递','韵达快递','申通快递','其他快递']

const service = new EditModal(config).setAddRequest(replenishExpress)
const {formRef, formState, LAYER, onCancel, onSubmit} = service

LAYER.title = '发货管理'
LAYER.width = 500
service.formState.value.id= props.record?.id
</script>
